import React from 'react';
import '@/style/user/login.scss';
import { Form, Button, Input  } from 'antd';
import { login, register, sms  } from '@/api/user.js';

export default class Home extends React.Component{
  state={
    userName: '',
    password: '',
    loginPage: true,
    ruserName: '',
    rpassword: '',
    againPassword: '',
    code: '',
    phone: '',
	picCode: '点击获取验证码'
  }
  componentDidMount() {
	  let numb = 0;
	  // for (let i=0;i<10000;i++) {
		 //  setTimeout(()=>{
		 //  		  numb++
		 //  		  console.log(numb)
		 //  		  sms(`${numb}`).then(async (res)=>{
		 //  		    this.setState({picCode:res.message.split(':')[1]?res.message.split(':')[1]:'请输入手机号'})
		 //  		  })
		 //  },1)
	  // }
  }
  render(){
    const layout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
    };
    const tailLayout = {
      wrapperCol: { offset: 6, span: 18 },
    };
    const onFinish = values => {
      console.log('Success:', values);
    };
  
    const onFinishFailed = errorInfo => {
      console.log('Failed:', errorInfo);
    };
    const {loginPage, picCode}  =this.state;
    return (
      <div className = 'login'>
        {
          loginPage?
          <div className="login-content">
            <div>
              账号登录
            </div>
            <div>
            <Form
              {...layout}
              name="login"
              initialValues={{ remember: true }}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
			  onFinish={this.loginDown.bind(this)}
            >
              <Form.Item
                label="账号"
                name="username"
                rules={[{ required: true, message: '请输入账号' }]}
              >
                <Input placeholder="请输入账号" onInput={this.getInfo.bind(this,'userName')}/>
              </Form.Item>

              <Form.Item
                label="密码"
                name="password"
                rules={[{ required: true, message: '请输入密码' }]}
              >
                <Input.Password placeholder="请输入密码" onInput={this.getInfo.bind(this,'password')}/>
              </Form.Item>

              <Form.Item {...tailLayout}>
                <Button type="primary" htmlType="submit">
                  登录
                </Button>&ensp;&ensp;&ensp;&ensp;
                <Button onClick={()=>{this.setState({loginPage:false})}}>注册</Button>
              </Form.Item>
            </Form>
            </div>
          </div>
          :<div className="register-content">
            <div>
              账号注册
            </div>
            <div>
            <Form
              {...layout}
              name="register"
              initialValues={{ remember: true }}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
			  onFinish={this.register.bind(this)}
            >
              <Form.Item
                label="账号"
                name="rusername"
                rules={[{ required: true, message: '请输入账号' }]}
              >
                <Input placeholder="请输入账号" onInput={this.getInfo.bind(this,'RuserName')}/>
              </Form.Item>

              <Form.Item
                label="密码"
                name="rpassword"
                rules={[{ required: true, message: '请输入密码' }]}
              >
                <Input.Password placeholder="请输入密码" onInput={this.getInfo.bind(this,'Rpassword')}/>
              </Form.Item>
              <Form.Item
                label="重复密码"
                name="againPassword"
                rules={[{ required: true, message: '请再次输入密码' }]}
              >
                <Input.Password placeholder="请再次输入密码" onInput={this.getInfo.bind(this,'againPassword')}/>
              </Form.Item>
              <Form.Item
                label="验证码"
                name="code"
                rules={[{ required: true, message: '请输入验证码' }]}
              >
                <Input placeholder="请输入验证码" addonAfter={<div className="img" onClick={this.getVerificationCode.bind(this)} >{picCode}</div>} onInput={this.getInfo.bind(this,'code')}/>
              </Form.Item>
              <Form.Item
                label="手机号"
                name="phone"
                rules={[{ required: true, message: '请输入手机号' }]}
              >
                <Input placeholder="请输入手机号" onInput={this.getInfo.bind(this,'phone')}/>
              </Form.Item>

              <Form.Item {...tailLayout}>
                <Button type="primary" htmlType="submit">
                  立即注册
                </Button>&ensp;&ensp;&ensp;&ensp;
                <Button onClick={()=>{this.setState({loginPage:true})}}>
                  已有账号
                </Button>
              </Form.Item>
            </Form>
            </div>
          </div>
        }
      </div>
    );
  }
  getInfo(who,e) {
    switch(who) {
      case 'userName' : this.setState({userName: e.target.value})
      break;
      case 'password' : this.setState({password: e.target.value})
      break;
      case 'RuserName' : this.setState({ruserName: e.target.value})
      break;
      case 'Rpassword' : this.setState({rpassword: e.target.value})
      break;
      case 'againPassword' : this.setState({againPassword: e.target.value})
      break;
      case 'code' : this.setState({code: e.target.value})
      break;
      case 'phone' : this.setState({phone: e.target.value})
      break;
      default : 
    }
  }
  loginDown() {
    console.log(this.state)
    const {userName,password} = this.state;
    login({username:userName,password}).then(res=>{
		if (res.message === '登录成功') {
			window.location.hash = '/home'
		}
    })
  }
  register() {
    const {ruserName,rpassword,againPassword,code,phone,loginPage} = this.state;
	register({username:ruserName,password:rpassword,new_password:againPassword,sms:code,phone:phone}).then(res=>{
		console.log(res, '注册')
		if (res.message === '注册成功') {
			console.log('zuc')
			this.setState({loginPage: !loginPage})
		}
	})
  }
  getVerificationCode() {
	  const {phone, picCode} = this.state;
	  console.log(phone)
	  sms(phone).then(async (res)=>{
		  console.log(res,'2131')
		  this.setState({picCode:res.message.split(':')[1]?res.message.split(':')[1]:'请输入手机号'})
	  })
  }
}
